<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import orderItem from "@/components/my/orderItem.vue";
import api from "@/api/api";

// 响应式数据
const keyword = ref("")
const active = ref("")
const tabs = ref([
  {
    title: "全部",
    type: "",
  },
  {
    title: "待付款",
    type: 0,
  },
  {
    title: "待服务",
    type: 31,
  },
  {
    title: "已完成",
    type: 100,
  },
  {
    title: "有售后",
    type: 4,
  },
])
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const pageInfo = ref({
  pageSize: 10,
  pageNum: 1,
})

// 路由
const route = useRoute()
const router = useRouter()

// 方法定义
const onSearch = () => {
  active.value = ""
  onRefresh()
}

const onLoad = async () => {
  await getOrderList()
  loading.value = false
}

const onRefresh = async () => {
  // 清空列表数据
  finished.value = false
  refreshing.value = true
  list.value = []
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  pageInfo.value.pageNum = 1
  await onLoad()
  refreshing.value = false
}

const back = () => {
  router.back()
}

const goDetail = (v) => {
  router.push({
    path: "/orderDetail",
    query: {
      orderSn: v.sn,
      type: active.value
    },
  })
}

const getOrderList = async () => {
  let res = await api.order.orderList({
    ...pageInfo.value,
    goodsName: keyword.value,
    orderStatus: active.value,
  })
  list.value = [...list.value, ...res.data]
  if (res.data.length < pageInfo.value.pageSize) {
    finished.value = true
  } else {
    pageInfo.value.pageNum++
  }
}

const getAfterSalePage = async () => {
  let res = await api.order.getAfterSalePage(pageInfo.value)
  list.value = [...list.value, ...res.data]
  if (res.data.length < pageInfo.value.pageSize) {
    finished.value = true
  } else {
    pageInfo.value.pageNum++
  }
}

const tabChange = (v) => {
  if (v == 4) {
    pageInfo.value.pageNum = 1
    list.value = []
    finished.value = false
    loading.value = true
    getAfterSalePage()
  } else {
    onRefresh()
  }
}

// 生命周期钩子
onMounted(() => {
  if (route.query.id == -1) {
    active.value = ""
  } else {
    active.value = Number(route.query.id)
  }
  if (active.value == 4) {
    getAfterSalePage()
  } else {
    onRefresh()
  }
})
</script>
<template>
  <div class="order">
    <div class="search">
      <van-search v-model="keyword" shape="round" show-action placeholder="搜索订单">
        <template #action>
          <div @click="onSearch" class="search_btn">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="tabs">
      <van-tabs v-model:active="active" @change="tabChange">
        <van-tab v-for="(v, i) in tabs" :key="i" :title="v.title" :name="v.type" />
      </van-tabs>
      <div class="list">
        <van-pull-refresh v-model:loading="refreshing" @refresh="onRefresh">
          <van-list v-model:loading="loading" :finished="finished" :immediate-check="false"
            :finished-text="list.length > 0 ? '没有更多了' : ''" @load="onLoad">
            <orderItem v-for="(v, i) in list" :key="i" :item="v" :type="v.orderStatus || 4" @refresh="onRefresh"
              @click="goDetail(v)"></orderItem>
          </van-list>
          <van-empty v-if="!loading && list.length == 0" description="暂无订单" />
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>


<style lang="less" scoped>
.order {
  min-height: 100vh;
  background: #fff;
  padding: 170px 50px 50px 50px;

  .search {
    position: fixed;
    padding: 50px;
    width: 100%;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .back {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }

    :deep(.van-search__field) {
      height: 100px;

    }

    :deep(.van-icon) {
      font-size: 60px;
    }

    :deep(.van-field__control) {
      font-size: 44px;
    }

    :deep(.van-search__action) {
      line-height: 50px;
    }

    .search_btn {
      padding: 20px 40px;
      border-radius: 999px;
      color: #fff;
      font-size: 44px;
      background: #1989fa;
    }

    :deep(.van-search) {
      flex-grow: 1;
      padding: 0 20px;
    }

    :deep(.van-search__action:active) {
      background-color: unset;
    }
  }

  .tabs {
    margin-top: 30px;
    margin-left: -50px;

    :deep(.van-tab) {
      font-size: 44px;
    }

    :deep(.van-tabs__wrap) {
      height: 200px;
    }

    :deep(.van-tab) {
      line-height: 44px;
    }

    :deep(.van-tab--active) {
      color: #333;
      font-weight: bold;
      font-size: 50px;
    }

    :deep(.van-tabs__line) {
      background-color: #406dfc;
      width: 80px;
      height: 12px;
      bottom: 75px;
    }
  }

  .list {
    margin-top: 30px;
    padding-left: 50px;

    :deep(.van-list__finished-text) {
      font-size: 44px;
    }
  }
}

:deep(.van-empty__image) {
  width: 550px;
  height: 550px;
}

:deep(.van-empty__description) {
  font-size: 44px;
}
</style>
